<template>
  <div ref="drawerContainer">
    <a-drawer :getContainer="drawerContainer" :class="'drawer-container'" :width="790" :title="state.drawer.title"
      placement="right" :closable="false" v-model:visible="state.drawer.visible">
      <a-row :gutter="14">
        <a-col :xs="24" :sm="12" :md="6" :lg="7" :xl="7">
          <a-form-item label="姓名" :labelCol="{ span: 4 }" :wrapperCol="{ span: 24 }" :colon=false>
            <a-input v-model:value="state.form.name" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :md="18" :lg="17" :xl="17">
          <a-form-item label="工号" :labelCol="{ span: 2 }" :wrapperCol="{ span: 24 }" :colon=false>
            <a-input style="width: 100%" v-model:value="state.form.code" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :xs="24" :sm="12" :md="17" :lg="17" :xl="17">
          <a-form-item label="卡号" :labelCol="{ span: 2 }" :wrapperCol="{ span: 24 }" :colon=false>
            <a-input v-model:value="state.form.card" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :md="7" :lg="7" :xl="7">
          <a-form-item label="性别" :labelCol="{ span: 4 }" :wrapperCol="{ span: 24 }" :colon=false>
            <a-select v-model:value="state.form.sex">
              <a-select-option value="1">男</a-select-option>
              <a-select-option value="2">女</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <a-form-item label="部门" :labelCol="{ span: 1 }" :wrapperCol="{ span: 24 }" :colon=false>
            <!-- <a-select v-model:value="state.form.org">
              <a-select-option value="1">开发部</a-select-option>
              <a-select-option value="2">财务部</a-select-option>
            </a-select> -->
            <a-cascader v-model:value="state.form.org" :options="state.options" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-top: 10px;">
        <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <a-form-item label="照片头像" :labelCol="{ span: 4 }" :wrapperCol="{ span: 24 }" :colon=false>
            <UploadAvater @photo="onPhotoChange" @avatar="onAvatarChange" />
          </a-form-item>
        </a-col>
        <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"
          style="display: flex;flex-direction:column;justify-content: space-between;">
          <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-item label="设备权限" :labelCol="{ span: 4 }" :wrapperCol="{ span: 24 }" :colon=false>
                <a-select v-model:value="state.form.devAuth">
                  <a-select-option value="1">1号楼</a-select-option>
                  <a-select-option value="2">2号楼</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-item label="密码权限" :labelCol="{ span: 4 }" :wrapperCol="{ span: 24 }" :colon=false>
                <a-select v-model:value="state.form.pwdAuth">
                  <a-select-option value="1">大门</a-select-option>
                  <a-select-option value="2">闸机</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <a-form-item label="角色" :labelCol="{ span: 2 }" :wrapperCol="{ span: 24 }" :colon=false>
                <a-select v-model:value="state.form.role">
                  <a-select-option value="1">管理员</a-select-option>
                  <a-select-option value="2">普通用户</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>

      <Btns :btnsOptions=state.btnsOptions @saveAndContinue=onSaveAndContinue @save=Onsave @cancel=onCancel />

      <!-- <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <a-form-item label="item.label">
            <a-input style="width: 100%" v-model:value="state.form" />
            <a-input-number style="width: 100%" v-model:value="state.form" />
            <a-select style="width: 100%" v-model:value="state.form">
            </a-select>
            <a-date-picker style="width: 100%" v-model:value="state.form" valueFormat="YYYY-MM-DD" />
            <a-time-picker style="width: 100%" v-model:value="state.form" valueFormat="HH:mm:ss" />
          </a-form-item>
        </a-col> -->
      <!-- </a-row> -->
    </a-drawer>
  </div>
</template>

<script lang='ts' setup>
const drawerContainer = ref()
import { on } from 'events';
import { ref, reactive, defineAsyncComponent } from 'vue';
const UploadAvater = defineAsyncComponent(() => import('@/components/table/uploadAvaterFace.vue'));
const Btns = defineAsyncComponent(() => import('@/components/table/btns.vue'));
const useContent = () => {
  return {
    code: '',
    name: '',
    card: '',
    org: '',
    sex: '',
    devAuth: '',
    pwdAuth: '',
    role: '',
    avatar: '',
    photo: ''
  }
}

const state = reactive({
  form: useContent(),
  drawer: {
    type: 0,
    title: '新增',
    visible: false,
  },
  btnsOptions: [
    {
      name: '保存并继续',
      size: 14,
      emit: 'saveAndContinue'
    },
    {
      name: '保存',
      size: 14,
      emit: 'save'
    },
    {
      name: '取消',
      size: 14,
      emit: 'cancel'
    },
  ],
  options: [
    {
      value: '1',
      label: '总部',
      children: [
        {
          value: '11',
          label: '财务',
          children: [
            {
              value: '111',
              label: '财务室1',
            },
            {
              value: '112',
              label: '财务室1',
            },
          ],
        },
        {
          value: '12',
          label: '食堂',
        },
        {
          value: '13',
          label: '车间',
        },
      ],
    }],
})

const onPhotoChange = (photo: string) => {
  state.form.photo = photo
}
const onAvatarChange = (avatar: string) => {
  state.form.avatar = avatar
}

const onSaveAndContinue = () => {
  console.log('saveAndContinue')
}
const Onsave = () => {
  console.log('save')
  console.log(state.form);

}
const onCancel = () => {
  console.log('onCancel')
}

// 打开弹窗
const openDrawer = async (code?: string) => {
  state.drawer.visible = true
  if (code) {
    state.drawer.title = '编辑'
    state.drawer.type = 1
    // queryItem(code)
  } else {
    state.drawer.type = 0
    state.form = useContent()
  }
};

defineExpose({
  openDrawer,
});
</script>
<style scoped lang='less'>
:deep(.ant-drawer-header) {
  background-color: #F6F6F6 !important;

}

:deep(.ant-drawer-title) {
  font-weight: 900 !important;
}

:deep(.ant-drawer-body) {
  background: linear-gradient(to bottom, #fff 0%, #f3f3f3 60%, #D6D6D6 100%);
}

:deep(.drawer-container .ant-form-item) {
  margin-bottom: 10px !important;
}
</style>